<!--
 * @Author: your name
 * @Date: 2021-09-10 09:39:54
 * @LastEditTime: 2021-09-11 17:34:38
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \code\ej-webui\src\pages\customer\detail.vue
-->
<template>
  <div class="customerDetail">
       <div class="btn">
      <el-button type="text" @click="$router.go(-1)">返回</el-button>
    </div>

  <el-container>
  <el-header>
  
<el-row :gutter="10">
  <div class="demo-type">
       <el-col :span="5">
      <template>
    <el-avatar :size="120" :src="resData.baseUsers" alt="图片丢失">
      <img :src="resData.userFace"/>
    </el-avatar>
        
    </template>
    </el-col>
        <el-col :span="5">
    <template >
    <el-button class="Face" type="text" @click="editface(resData)">修改头像</el-button></template>
     </el-col>
  </div>
    
</el-row>
  </el-header>
 <!-- 模态框 -->
      <el-dialog
        :title="title"
        :visible.sync="visible"
        @close="dialogCloseHandler"
      >
        <el-form :model="customer"  ref="saveForm">
          <el-form-item
            label="用户头像"
            :label-width="formLabelWidth"
            prop="userFace"
          >
            <el-upload
              class="avatar-uploader"
              action="http://81.69.24.232/pet/jz_upload.php"
              :show-file-list="false"
              :on-success="handlePhotoSuccess"
            >
              <img v-if="imageUrl" :src="imageUrl" class="avatar" width="200px" height="200px" />
              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="visible = false">取 消</el-button>
          <el-button type="primary" @click="toSavehandler">确 定</el-button>
        </div>
      </el-dialog>


  <div>
  <el-main>

<el-descriptions title="用户详情" :column="3" border>
  <el-descriptions-item label="用户名" label-class-name="my-label" content-class-name="my-content">{{resData.username}}</el-descriptions-item>
  <el-descriptions-item label="真实姓名">{{resData.realname}}</el-descriptions-item>
  <el-descriptions-item label="性别">{{resData.gender}}</el-descriptions-item>
  <el-descriptions-item label="用户角色" >
    <el-tag size="small">{{resData.roles[0].name}}</el-tag>
  </el-descriptions-item>
  <el-descriptions-item label="用户生日" >{{resData.birth | fmDate}}
  </el-descriptions-item>
  <el-descriptions-item label="用户状态" >
    <el-tag size="small">{{resData.status}}</el-tag>
  </el-descriptions-item>
  <el-descriptions-item label="注册时间" >{{resData.registerTime | fmDate}}
  </el-descriptions-item>
  <el-descriptions-item label="用户邮箱" :contentStyle="{'text-align': 'right'}">{{resData.email}}</el-descriptions-item>
</el-descriptions>



      </el-main></div>

 

  <el-footer></el-footer>
  </el-container>
  </div>
</template>
<script>

import request from "@/utils/request";
import { mapActions} from "vuex";
import qs from "qs";
import _ from "lodash";
export default {
 
  data() {
    return {
      
      resData: [],
      visible:false,
      customer:{},
      size:'',
      imageUrl:null,
      formLabelWidth: "80px",
      title:"",
    };
  },
  methods: { 
     // 导入状态机中的方法
    ...mapActions("category", ["findAllCategories"]),
      // 分页查询产品表格
    // async pageQueryProductions() {
    //   // 过滤数据将空字符串删除
    //   for (let key in this.params) {
    //     if (this.params[key] == "") {
    //       delete this.params[key];
    //     }
    //   }
    //   let res = await requset.get("/baseUser/findUserDetailsById", {
    //     params: this.params,
    //   });
    //   this.resData = res.data;
    // },
      
    findCustomerDetailById(id) {
      request.get("/baseUser/findUserDetailsById", { params: { id } }).then((res) => {
        this.resData = res.data;
        this.name = res.data.roles.name;
      });
    },
    //修改头像点击事件
    editface(resData){
        this.imageUrl=resData.userFace;
        this.title="修改头像";
        this.visible=true;
    },
    // 图片上传成功的回调
    handlePhotoSuccess(res, file) {
      // 将返回的图片在线地址映射到数据模型中
      this.resData.userFace = res;
      this.imageUrl = res;
    },
    // 表单保存事件
    toSavehandler() {
      this.$refs["saveForm"].validate((valid) => {
        if (valid) {
          requset
            .post("/baseUser/alterUserface", qs.stringify(this.resData))
            .then((res) => {
            //   this.pageQueryProductions(); // 重载数据
              this.$message.success(res.message); // 提示操作结果信息
              this.visible = false; // 关闭模态框
            });
        } else {
          return false;
        }
      });
    },
    // 模态框关闭的回调
    dialogCloseHandler() {
      this.$refs["saveForm"].resetFields(); // 置空表单验证
    },

    
  },
  created() {
    this.findCustomerDetailById(this.$route.query.id);
  }
};

</script>
<style>
  .el-header{

    
    height: 400px;
    line-height: 200px;
  }
  .face{
      padding-left: 300px;
  }
  

  .el-main {
      padding-top: 100px;
    
      height: 300px;
   
  }
  .el-footer{
      line-height: 200px;

  }
  .el-row {
    margin-bottom: 20px;
  
  }
  .el-col {
    border-radius: 4px;
  }
 
  
 
</style>